<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <form action=""></form> -->
    账号：<input type="text" name="username" id="uname"><br>
    密码：<input type="text" name="password" id="pwd"><br>
    <button type="button" onclick="post1()">post请求不带参数</button><br>
    <button type="button" onclick="post2()">post请求带参数</button><br>
    <button type="button" onclick="post3()">post请求带参数[json]</button>
</body>
<script>
    // 不带参数
    function post1(){
        //1.实例化xhr对象
        var xhr = new XMLHttpRequest()  // 状态0
        //2. 设置请求方式和地址
        // 1) 请求方式 2）请求地址
        xhr.open("post", "http://localhost:3000/post1")  // 状态1
        //3.发送请求
        xhr.send()  // 状态2
        //4.接收响应数据
        xhr.onreadystatechange = function(){
            // xhr.readyState 里面保存着 0-4 的五个状态
            if(xhr.readyState == 4 && xhr.status == 200){
                // 拿到完整数据
                console.log(xhr.responseText); 
            }
        }
    }

    function post2(){
        // 得到用户输入的是什么？
        // 得到元素节点
        var uname = document.getElementById("uname").value
        var pwd = document.getElementById("pwd").value
        // 第一步还是把要传递的参数拼接为字符串 但是不需要拼接到地址栏上了
        let postData = `username=${uname}&password=${pwd}`
        //1.实例化xhr对象
        var xhr = new XMLHttpRequest()  // 状态0
        //2. 设置请求方式和地址
        // 1) 请求方式 2）请求地址
        xhr.open("post", "http://localhost:3000/post2")  // 状态1
        // open之后，send之前设置请求头 设置请求格式
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        //3.发送请求
        // send()里面接受一个参数，就是你要发送的请求体
        xhr.send(postData)  // 状态2
        //4.接收响应数据
        xhr.onreadystatechange = function(){
            // xhr.readyState 里面保存着 0-4 的五个状态
            if(xhr.readyState == 4 && xhr.status == 200){
                // 拿到完整数据
                console.log(xhr.responseText); 
            }
        }
        // 1.post请求第一步还是把要传递的参数拼接为字符串放send()里面
        // 2.设置请求头  application/x-www-form-urlencoded
    }

    // json格式传递数据  json字符串
    function post3(){
        // 得到用户输入的是什么？
        // 得到元素节点
        var uname = document.getElementById("uname").value
        var pwd = document.getElementById("pwd").value
        // 第一步还是把要传递的参数拼接为字符串 但是不需要拼接到地址栏上了
        // JSON.stringify  把一个json对象转化为json字符串 方便传输
        
        let postData = JSON.stringify({
            username: uname,
            password: pwd
        })

        // console.log(postData);
        //1.实例化xhr对象
        var xhr = new XMLHttpRequest()  // 状态0
        //2. 设置请求方式和地址
        // 1) 请求方式 2）请求地址
        xhr.open("post", "http://localhost:3000/post3")  // 状态1
        // open之后，send之前设置请求头 设置请求格式
        xhr.setRequestHeader("Content-Type", "application/json")
        //3.发送请求
        // send()里面接受一个参数，就是你要发送的请求体
        xhr.send(postData)  // 状态2
        //4.接收响应数据
        xhr.onreadystatechange = function(){
            // xhr.readyState 里面保存着 0-4 的五个状态
            if(xhr.readyState == 4 && xhr.status == 200){
                // 拿到完整数据
                console.log(xhr.responseText); 
            }
        }
        // 1.post请求第一步还是把要传递的参数拼接为字符串放send()里面
        // 2.设置请求头  application/x-www-form-urlencoded

        // json格式的
        // 1.post请求第一步还是把要传递的参数对象JSON.stringify()
        // 2.设置请求头  application/json
    }
</script>
</html>